<!-- 
 @Author: LW  
 @Date: 2021-01-15 14:26:07  
 @function:eChart柱状图
  ---------------------------------------------------------- 
 -->
<template>
  <div id="lineChart" style="width:100%;height:400px;">柱状图统计</div>
</template>
<script>
import Echarts from "echarts";
export default {
  data() {
    return {
      myChart: {},
    };
  },
  props: {
    echartObj: {
      type: Object,
      default: {},
    },
  },
  watch: {
    //观察option的变化
    echartObj: {
      handler(newVal, oldVal) {
        if (this.myChart) {
          //  this.name=newVal.name;
          //   this.titles=newVal.titles;
          //    this.values=newVal.values;
          this.loadEchart();
        } else {
          this.init();
        }
      },
      deep: true, //对象内部属性的监听，关键。
    },
  },
  created() {},
  mounted() {
    this.loadEchart();
  },
  methods: {
    loadEchart() {
      if (this.echartObj.X != null) {
        this.myChart = Echarts.init(document.getElementById("lineChart"));
        var option = {
          xAxis: {
            type: "category",
            data: this.echartObj.X,
            axisLabel: {
              color: "#0082A8",
              fontSize: 12,
              interval: 0, //横轴信息全部显示
              rotate: -20, //-20度角倾斜显示
            },
            //设置轴线的属性
            axisLine: {
              lineStyle: {
                color: "#0082A8",
                width: 1, //这里是为了突出显示加上的
              },
            },
          },
          //legend: {
          //    data: result.Data.Title,
          //},
          tooltip: {
            trigger: "axis",
          },
          yAxis: {
            name: this.echartObj.name,
            axisLabel: {
              textStyle: {
                color: "#0082A8",
              },
            },
            //设置轴线的属性
            axisLine: {
              lineStyle: {
                color: "#0082A8",
                width: 1, //这里是为了突出显示加上的
              },
            },
          },
          series: this.echartObj.Y,
          dataZoom: [
            //给x轴设置滚动条
            {
              start: 0, //默认为0
              end: this.echartObj.X.length > 10 ? 50 : 100, //默认为100
              type: "slider",
              show: true,
              xAxisIndex: [0],
              handleSize: 0, //滑动条的 左右2个滑动条的大小
              height: 8, //组件高度
              top: "97%",
              left: 50, //左边的距离
              right: 40, //右边的距离
              bottom: 26, //右边的距离
              handleColor: "#ddd", //h滑动图标的颜色
              handleStyle: {
                borderColor: "#cacaca",
                borderWidth: "1",
                shadowBlur: 2,
                background: "#ddd",
                shadowColor: "#ddd",
              },
              fillerColor: new Echarts.graphic.LinearGradient(1, 0, 0, 0, [
                {
                  //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
                  //给第一个设置0，第四个设置1，就是垂直渐变
                  offset: 0,
                  color: "#1eb5e5",
                },
                {
                  offset: 1,
                  color: "#5ccbb1",
                },
              ]),
              backgroundColor: "#ddd", //两边未选中的滑动条区域的颜色
              showDataShadow: false, //是否显示数据阴影 默认auto
              showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
              handleIcon:
                "M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z",
              filterMode: "filter",
            },
            //下面这个属性是里面拖到
            {
              type: "inside",
              show: true,
              xAxisIndex: [0],
              start: 1, //默认为1
              end:
                100 -
                1500 /
                  (this.echartObj.X.length != 15
                    ? this.echartObj.X.length
                    : 16), //默认为100
            },
          ],
        };

        this.myChart.setOption(option,true);
        this.myChart.resize();
      }
    },
  },
};
</script>